import 'package:flutter/material.dart';
import 'package:flutter_styled_toast/flutter_styled_toast.dart';
import 'package:get/get.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

import 'dart:math' as math;

class SearchController extends GetxController {
  RxString search = ''.obs;

  RxList<String> history =
      RxList(['世界杯', '故宫博物馆', '周边游', '记录四', '记录三', '天安门', '八达岭', '天坛', '王府井', '长安街', '西直门']);

  RxList<String> hot = RxList(['北海万豪文化酒店', '汤山温泉', '海城一品居', '万隆购物广场', '热门推荐三', '热门推荐四', '热门推荐五']);
}

class SearchView extends GetView<SearchController> {
  const SearchView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: true,
          leading: InkWell(
            onTap: () {
              Get.back();
            },
            child: Icon(
              Icons.arrow_back_ios,
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
              size: 20.w,
            ),
          ),
          leadingWidth: 40.w,
          title: Container(
              height: 38.h,
              padding: EdgeInsets.only(left: 10.w, right: 15.w),
              decoration: BoxDecoration(
                  border:
                      Border.all(color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478)),
                  borderRadius: BorderRadius.all(const Radius.circular(20).w)),
              child: Obx(() => TextField(
                    controller: ToolsUtils.editingController(controller.search.value),
                    cursorWidth: 2.0,
                    cursorRadius: const Radius.circular(2),
                    cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                    style:
                        StylesUtils.customTextStyle(fontSize: 15.sp, color: ColorsUtils.color3333),
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search_sharp, size: 25.sp),
                      prefixIconColor: Colors.black54,
                      prefixIconConstraints: BoxConstraints.expand(width: 35.w),
                      border: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      hintText: '搜索目的地/景点',
                      contentPadding: EdgeInsets.symmetric(vertical: 12.h),
                      isCollapsed: true,
                      isDense: true,
                      hintStyle: StylesUtils.customTextStyle(
                        color: ColorsUtils.color9999,
                      ),
                      suffixIcon: ToolsUtils.assetImageSvg('u595.svg', width: 18.w, height: 18.h),
                      suffixIconConstraints: BoxConstraints.expand(width: 18.w, height: 18.h),
                      constraints: BoxConstraints(maxHeight: 38.h),
                    ),
                    onChanged: (String keyword) {
                      controller.search.value = keyword;
                    },
                  ))),
          actions: [
            InkWell(
                onTap: () {
                  if (controller.search.isEmpty) {
                    showToast('请输入搜索内容',
                        context: context,
                        position: StyledToastPosition.center,
                        animation: StyledToastAnimation.slideToBottom,
                        reverseAnimation: StyledToastAnimation.sizeFade,
                        textStyle: StylesUtils.customTextStyle(fontSize: 14.sp),
                        duration: const Duration(seconds: 2));
                    return;
                  }
                },
                child: Container(
                  constraints: BoxConstraints.expand(width: 60.w, height: 38.h),
                  margin: EdgeInsets.only(left: 15.w, right: 10.w),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.r),
                      gradient: const LinearGradient(
                          colors: [Color.fromRGBO(52, 120, 246, 1), Color.fromRGBO(2, 167, 240, 1)],
                          transform: GradientRotation(math.pi),
                          stops: [0.0, 0.99])),
                  child: Text('搜索', style: StylesUtils.customTextStyle()),
                ))
          ],
        ),
        body: Obx(() => SingleChildScrollView(
              padding: EdgeInsets.all(10.h),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '历史搜索',
                        style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                      ),
                      Icon(
                        Icons.delete_rounded,
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                        size: 15.w,
                      )
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10.h),
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      direction: Axis.horizontal,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      spacing: 5.w,
                      runSpacing: 10.w,
                      children: controller.history
                          .map((e) => InkWell(
                                onTap: () {
                                  Get.toNamed(RoutePath.searchResult, arguments: {'result': e});
                                },
                                child: Chip(
                                    backgroundColor:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                                    side: BorderSide.none,
                                    shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(15.w)),
                                    label: Text(
                                      e,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color3333, fontSize: 13.sp),
                                    )),
                              ))
                          .toList(),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10.h),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '热门推荐',
                      style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10.h),
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      direction: Axis.horizontal,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      spacing: 5.w,
                      runSpacing: 10.w,
                      children: hotWidget(),
                    ),
                  )
                ],
              ),
            )));
  }

  List<Widget> hotWidget() {
    return controller.hot
        .asMap()
        .map((index, e) => MapEntry(
            index,
            InkWell(
              onTap: () {
                Get.toNamed(RoutePath.searchResult, arguments: {'result': e});
              },
              child: Chip(
                label: Text(e),
                backgroundColor: index < 2
                    ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorDfee)
                    : ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                side: BorderSide.none,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.w)),
                labelStyle:
                    StylesUtils.customTextStyle(color: ColorsUtils.color3333, fontSize: 13.sp),
              ),
            )))
        .values
        .toList();
  }
}
